<template>
<div class="box">
  <center class="title">版权登记申请流程管理系统</center>
  <div class="account">
    <div style="margin-bottom: 24px;">
        <div class="input" style="margin-bottom: 12px;"><span style="width:4rem ; ">账号：</span><el-input style="float:left" v-model="user" placeholder="请输入账号" ></el-input></div>
        <div class="input"><span style="width:4rem ">密码：</span><el-input  style="float:left" v-model="password" placeholder="请输入内容" show-password></el-input></div>
      </div>
      <div class="action">
        <el-button style="float:left;width:12vh;height:12vh;margin-left:12px;" @click="login">确定</el-button>
        <el-button style="float:left;width:12vh;height:12vh;" @click="dialogVisible = true">取消</el-button>
      </div>
  </div>
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <span>确定结束登录并退出吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="close">确 定</el-button>
  </span>
</el-dialog>
</div>

</template>
<script>
import {ipcRenderer} from 'electron'
export default{
  data () {
    return {
      user: '',
      password: '',
      dialogVisible: false
    }
  },
  methods: {
    login () {
      console.log('login')
      // ipcRenderer.send('asynchronous-message', 'dump')
      if (this.user !== '' && this.password !== '') {
        this.$router.push('/content')
      } else {
        this.$alert('账号或密码为空，请填写完整信息', '提示', {
          confirmButtonText: '确定'
        })
      }
    },
    close () {
      ipcRenderer.send('asynchronous-message', 'close')
    }
  }
}
</script>
<style>
  .box{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background-color: #409EFF;
    height: 100vh;
  }
  .title{
    background-color: #409EFF;
    font-size: 48px;
    margin-bottom: 56px;
    
  }
  .account{
    display:flex;
    flex-direction:row;
    background-color: #409EFF;

  }

  .input{
    display:flex;
    flex-direction:row;
    
  }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #f9fafc; */
  }
  app {
    background-color: #3766c5;
  }
</style>